<!--  / warpper  -->
<main class="warpper">

    <div class="newsDetail_sec1">
        <div class="container">
            <div class="newsDetail_sec1Con">
                <div class="newsDetail_sec1Left">
                    <div class="newsDetail_sec1Left_txt">
                        <h6>发布时间</h6>
                        <p>{$detail.date}</p>
                        <h6>发布者</h6>
                        <p>{$detail.author}</p>
                        <h6>类别</h6>
                        {switch name="$detail.mold"}
                        {case value="news"}<p>新闻中心</p>{/case}
                        {case value="brand"}<p>品牌发布会</p>{/case}
                        {/switch}
                    </div>
                    <div class="newsDetail_sec1Left_more">
                        {switch name="$detail.mold"}
                        {case value="news"}<a href="{:url('index/index/news')}">All information</a>{/case}
                        {case value="brand"}<a href="{:url('index/index/brand')}">All information</a>{/case}
                        {/switch}
                    </div>
                </div>
                <div class="newsDetail_sec1Right">
<!--                    <div class="newsDetail_sec1Img">-->
<!--                        <img src="__CDN__/static/images/newsImg01.jpg" alt="" width="100%">-->
<!--                    </div>-->
                    <div class="newsDetail_sec1Title">
                        <h6>{$detail.title}</h6>
                    </div>
                    <div class="newsDetail_sec1Box">{$detail.content}</div>
                </div>
            </div>
        </div>
    </div>

    {notempty name="$other"}
    <div class="newsDetail_sec2">
        <div class="newsDetail_sec2Title">Related news</div>
        <div class="container">
            <!-- 资讯切换轮播 -->
            <div class="swiper-container newsDetail_sec2Swiper">
                <div class="swiper-wrapper">
                    {foreach $other as $row}
                    <div class="swiper-slide">
                        <a class="newsDetail_sec2Swiper_con" href="{:url('index/index/newsdetail')}?id={$row.id}">
                            <div class="newsDetail_sec2Swiper_img">
                                <div class="newsDetail_sec2Swiper_imgbox"
                                     style="background: url(__CDN__{$row.image}) center top/cover no-repeat;"></div>
                                <div class="newsDetail_sec2Swiper_icon">
                                    <img src="__CDN__/static/images/arrow4.png" alt="">
                                </div>
                            </div>
                            <div class="newsDetail_sec2Swiper_txt">
                                <p>{$row.title}</p>
                                <div class="newsDetail_sec2Swiper_more">
                                    <div class="newsDetail_sec2Swiper_moreIcon">
                                        <img src="__CDN__/static/images/arrow5.png" alt="">
                                    </div>
                                    <div class="newsDetail_sec2Swiper_moreTxt">view more</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
    </div>
    {/notempty}

</main>
<!--  / warpper  -->
<script>
    $(function () {

        //导航栏鼠标悬停
        $('.header').hover(function () {
            $('.header').addClass('on');
        }, function () {
            if ($(window).scrollTop() > 100) {
                $('.header').stop(true).addClass('on');
            } else {
                $('.header').stop(true).addClass('on');
            }
        })

        // 资讯切换轮播
        var newsDetail_sec2Swiper = new Swiper('.newsDetail_sec2Swiper', {
            loop: true,
            speed: 1200,
            observer: true,
            observeParents: true,
            autoplay: 5000,
            autoplayDisableOnInteraction: false,
            slidesPerView: 4,
            slidesPerGroup: 4,
            spaceBetween: 60,
            breakpoints: {
                1440: {
                    spaceBetween: 40,
                },
            }
        })

    })

    $(window).ready(function () {
        $('.header,.newsDetail_sec1').addClass('on');
    })
    $(window).load(function () {
        if ($(window).width() <= 768) {
            $('.newsDetail_sec1,.newsDetail_sec2').addClass('on');
        }
    })
    $(window).resize(function () {

    })

    $(window).scroll(function () {
        var h = $(window).scrollTop()

        //屏幕下拉导航栏变化
        if (h > 100) {
            $('.header').addClass('on');
        } else {
            $('.header').addClass('on');
        }


    })

</script>